
import { formatOptions } from './formatter';
import type { Options
  // BaseNameDataObject
} from './type';

// interface YData extends BaseNameDataObject {
//   tooltipTitles?: string[]
// }

interface TreePolylineChartProps {
  options: Options;
  yData: any[];
  tooltip?: Record<string, any>;
  extendSeries: Record<string, any>;
}

export const createTreePolylineOption = ({
  options,
  yData,
  tooltip,
  extendSeries
}: TreePolylineChartProps) => {
  // 格式化options
  options = formatOptions(options);
  let data: any[] = [];
  data = [{
    ...yData[0],
    emphasis: {
      focus: 'none',
      label: {
        backgroundColor: '#EDF1FD',
        color: '#4975E9'
      }
    }
  }];
  return {
    tooltip: {
      show: false,
      ...tooltip
    },
    zoom: 1,
    series: [{
      type: 'tree',
      data,
      name: 'tree',
      orient: 'vertical',
      edgeForkPosition: '0%',
      top: 32,
      left: 60,
      bottom: 32,
      right: 60,
      edgeShape: 'polyline',
      symbol: 'none',
      initialTreeDepth: 1, // 树展开层级，从0开始
      lineStyle: {
        width: 2,
        color: '#EDF1FD'
      },
      label: {
        verticalAlign: 'middle',
        align: 'center',
        fontSize: 14,
        width: 120,
        height: 64,
        backgroundColor: '#EBEDF0',
        overflow: 'truncate',
        ellipsis: '...',
        borderRadius: 4,
        color: '#303133',
        formatter: function(params: any) {
          if (params.dataIndex === 1) {
            return '{rootBorder| }' + '\n' + '{root|' + params.name + '}';
          }
          if (params.dataIndex === 1) return;
          const value = (params.value || params.value === 0) ? params.value + '%' : '';
          return '{name|' + params.name + '}' + '\n' + '{percent|' + value + '}';
        },
        rich: {
          rootBorder: {
            width: 120,
            backgroundColor: '#4975E9',
            height: 6,
            borderRadius: [4, 4, 0, 0]
          },
          root: {
            width: 120,
            height: 58,
            lineHeight: 58,
            backgroundColor: '#EDF1FD',
            color: '#4975E9',
            borderRadius: [0, 0, 4, 4]
          },
          name: {
            lineHeight: 26,
            height: 26,
            padding: 4
          },
          percent: {
            lineHeight: 30,
            width: 112,
            height: 30,
            color: '#606266',
            backgroundColor: '#fff',
            borderRadius: 4
          }
        }
      },

      labelLayout: {
        hideOverlap: true
      },

      leaves: {},
      expandAndCollapse: true,
      animationDurationUpdate: 750,
      emphasis: {
        focus: 'none',
        label: {
          backgroundColor: '#6D91ED',
          color: '#fff',
          formatter: function(params: any) {
            if (params.dataIndex === 1) {
              return ;
            }
            const value = (params.value || params.value === 0) ? params.value + '%' : '';
            return '{name|' + params.name + '}' + '\n' + '{percent|' + value + '}';
          },
          rich: {
            percent: {
              color: '#4975E9'
            }
          }
        }
      },
      ...extendSeries
    }
    ]
  };
};
